import React from 'react';
import {
  Image,
  TouchableWithoutFeedback,
  Text,
  View,
  StyleSheet,
} from 'react-native';
import NativeEvent from 'rtn-supernote-plugin-core/src/module/NativeEvent';
import stylesXS from '../styles/xs';
import stylesMD from '../styles/md';
import stylesLG from '../styles/lg';
import dimesA5 from '../styles/size/a5';
import dimesA5X2 from '../styles/size/a5x2';
import dimesA6 from '../styles/size/nom';

const TitleBar = ({
  title = '',
  backgroundColor = '#fff',
  textColor = '#000',
  textRightColor = '#000',
  leftBtnText = '',
  rightBtnText = '',
  rightBtnTextStyle,
  titleStyle,
  onBack = async () => await NativeEvent.onStop(),
  onRight = () => {},
  leftBtnStatus = true,
  rightBtnStatus = false,
  rightValueBtn = true,
  screenHeight,
  screenWidth,
  sWidth,
  status = '',
  subTitle = false// 是否是次级标题
}) => {
  let wd = Math.round(screenWidth);
  const styles =
    wd === 1024 || wd === 1365
      ? stylesLG
      : wd === 994 || wd === 1325
      ? stylesMD
      : stylesXS;
  const nom = wd === 1024 || wd === 1365
    ? dimesA5X2
    : wd === 994 || wd === 1325
      ? dimesA5
      : dimesA6;
  const ViewBack = leftBtnStatus ? TouchableWithoutFeedback : View;
  const ViewRight =
    rightBtnStatus && rightValueBtn ? TouchableWithoutFeedback : View;
  return (
    <View
      style={[
        styles.titleContainer,
        styles.bottomBorder,
        styles.titleHeight,
        sWidth,
        {
          backgroundColor,
        },
      ]}>
      <View style={{left: subTitle? 0: nom.dp_px_21, position: 'absolute'}}>
        <ViewBack onPress={leftBtnStatus ? onBack : null}>
          {leftBtnStatus ? (
            <View
              style={[
                styles.backButton,
                styles.titleHeight,
                {
                  paddingHorizontal:
                    styles.fontSize_30.fontSize -
                    styles.borderWidth.borderWidth,
                },
              ]}>
              {leftBtnText ? (
                <Text
                  style={[
                    styles.fontSize_30,
                    {
                      color: textColor,
                      fontWeight: '400',
                    },
                  ]}>
                  {leftBtnText}
                </Text>
              ) : (
                <Image
                  source={require('../../assets/ic_back.png')}
                  style={[
                    styles.checkBtnWH,
                    {
                      tintColor: textColor,
                    },
                  ]}
                />
              )}
            </View>
          ) : null}
        </ViewBack>
      </View>
      <Text
        style={[
          styles.title,
          styles.fontSize_34,
          {
            color: textColor,
            width: screenWidth * 0.45,
            textAlign: 'center',
            fontWeight: subTitle ? '400' : '700'
          },
        ]}
        ellipsizeMode={'middle'}
        numberOfLines={1}>
        {title}
      </Text>
      <View
        style={{
          right:
            status === 'content'
              ? -styles.padding_48.padding
              : status === 'create'
              ? 0
              : 0,
          position: 'absolute',
        }}>
        <ViewRight onPress={rightBtnStatus ? onRight : null}>
          {rightBtnStatus ? (
            <View
              style={[
                styles.backButton,
                {paddingVertical: 'unset'},
                styles.titleHeight,
                styles.titleRightBtn,
                styles.titleRightBtnPr,
              ]}>
              {rightBtnText ? (
                <Text
                  style={[
                    styles.fontSize_30,
                    {
                      color: rightValueBtn ? textColor : textRightColor,
                      fontWeight: '400',
                    },
                    rightBtnTextStyle && rightBtnTextStyle,
                  ]}>
                  {rightBtnText}
                </Text>
              ) : (
                <Image
                  source={require('../../assets/ic_more.png')}
                  style={[styles.titleRightBtnPr, styles.checkBtnWH]}
                />
              )}
            </View>
          ) : null}
        </ViewRight>
      </View>
    </View>
  );
};

export default TitleBar;
